<template>
    <div class="toolsPand">
        <div class="toolsPand-head">
            <div class="toolsPand-head-title">网站名称:</div>
            <div>
                <el-input v-model="input" style="width: 24vw;" placeholder="请输入网站名称" />
            </div>
            <div>
                <el-button type="primary" @click="add">搜索</el-button>
            </div>
        </div>
        <div class="toolsPand-body">
            <a href="#" class="toolsPand-body-item" v-for="n in 20">
                <div class="toolsPand-body-item-img">
                    <img src="https://element-plus.org/images/element-plus-logo-small.svg" alt="">
                </div>
                <div class="toolsPand-body-item-content">
                    <div class="toolsPand-body-item-title">ELEENT{{ n }}</div>
                    <div class="toolsPand-body-item-content-text">dgfdghfdsdfdgfdghfdgsdf</div>
                </div>
            </a>
        </div>
        <div class="toolsPand-head">
            <div style="margin-top: 1vh;">
                <el-pagination background layout="prev, pager, next" :total="50" class="mt-4"/>
            </div>
        </div>
    </div>
</template>
<style scoped>
.toolsPand{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.toolsPand-head{
    width: 100%;
    height: 6vh;
    line-height: 6vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.toolsPand-head>div{
    margin: 0 10px;
}
.toolsPand-body{
    flex: 1;
    margin: 0vh 4vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}
.toolsPand-head-title{
    font-weight: 600;
}
.flex-column-center{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.toolsPand-body-item{
    display:inline-block;
    width: 23%;
    margin: 10px;
    height: 11vh;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    /* 添加阴影 */
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    color: #000;
    text-decoration: none;
}
.toolsPand-body-item-img{
    width: 7vh;
    height: 7vh;
    padding: 2vh;
}
.toolsPand-body-item-img>img{
    width: 7vh;
    height: 7vh;
}
.toolsPand-body-item-title{
    line-height: 4vh;
    width: 100%;
    height: 4vh;
    border-bottom: 1px solid #dcdfe6;
}
.toolsPand-body-item-title:hover{
    color: #409eff;
}
.toolsPand-body-item-content{
    flex: 1;
    margin-right: 2vh;
}
.toolsPand-body-item-content-text{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-height: 4vh;
    line-height: 4vh;
}
</style>
<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
</script>